<template>
  <div>
    <div class="groupId">
      <span class="groupNameShow">{{groupName}}</span>
      <div class="groupSelect" @click="groupSelectClick">选择拼团
        <p class="c"></p>
      </div>
    </div>
    <div class="groupNum">
      <input
        placeholder-class="phcolor"
        type="number"
        v-model="groupOrderNum"
        placeholder="请输入拼团订单数（订单内人数随机生成已拼团人数）"
      >
    </div>
    <button class="btn" @click="addVirtualGroupClick">添加</button>
    <!-- 拼团列表 -->
    <div class="groupBox" v-if="isShow">
      <div class="group">
        <div class="goroupBtn">
          <p @click="listClose">取消</p>
          <span @click="listOk">确定</span>
        </div>
        <div class="groupList">
          <scroll-view
            class="scroll-wrap no-scroll-bar"
            style="height:calc(100% - 10px)"
            scroll-y
            @scrolltolower="handleLoadMore"
          >
            <div
              v-for="(item,index) in orderList"
              :key="index"
              @click="orderInfoClick(item)"
              :class="item.isBlue ? 'contBlue' : 'cont'"
            >{{item.groupName}}</div>
            <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
          </scroll-view>
        </div>
      </div>
      <div class="zz"></div>
    </div>
  </div>
</template>

<script>
//
import { GROUP_ORDER_LIST, ADD_VIRTUAL_ORDER } from '@/api'

export default {
  components: {},
  data () {
    return {
      groupName: '未选择拼团',
      groupOrderNum: '',
      currentPage: 1,
      alreadyLastPage: false,
      orderList: [],
      item: {},
      isShow: false
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.init()
  },
  created () {},
  methods: {
    groupSelectClick () {
      this.isShow = true
      this._getOrderList()
    },
    listClose () {
      this.isShow = false
    },
    listOk () {
      const vm = this
      let isFlse = Object.keys(vm.item)
      if (isFlse.length <= 0) {
        vm.$toast('还未选择拼团')
      } else {
        vm.groupName = vm.item.groupName
        vm.isShow = false
      }
    },
    orderInfoClick (item) {
      const vm = this
      vm.orderList.forEach(_ => {
        _.isBlue = false
      })
      item.isBlue = true
      vm.item = item
    },
    addVirtualGroupClick () {
      const vm = this
      vm._addVirtualGroup()
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._findGroupOrderPage()
      }
    },
    _addVirtualGroup () {
      const vm = this
      let params = {
        groupId: vm.item.groupId,
        groupOrderNum: vm.groupOrderNum,
        shopId: vm.item.shopId
      }

      ADD_VIRTUAL_ORDER(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('添加成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _getOrderList () {
      const vm = this
      GROUP_ORDER_LIST(vm.account.shopId, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { isFirstPage, isLastPage } = r.data.data
            let list = r.data.data.list
            let isFlse = Object.keys(vm.item)
            list.forEach(_ => {
              _.isBlue = false
              if (isFlse.length > 0) {
                if (vm.item.groupId === _.groupId) {
                  _.isBlue = true
                }
              }
            })
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.orderList = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.orderList.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.orderList.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    },
    init () {
      this.orderList = []
      this.currentPage = 1
      this.alreadyLastPage = false
      this.groupName = '未选择拼团'
      this.groupOrderNum = ''
      this.item = {}
      this.isShow = false
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

body {
  background: #edf0f5;
}
.groupId {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .groupNameShow {
    font-size: 14px;
    color: #9b9b9b;
    margin-left: 20px;
  }
  .groupSelect {
    width: 80px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #fff;
    background: #5c95f5;
    border-radius: 4px;
    margin-right: 20px;
    .c {
      width: 5px;
      height: 5px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: rotate(135deg);
      margin-left: 5px;
    }
  }
}
.groupNum {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  input {
    padding-left: 20px;
    border: 0;
    font-size: 14px;
    color: #000;
    width: 350px;
  }
  .phcolor {
    color: #9b9b9b;
  }
}
.btn {
  width: 90%;
  height: 40px;
  color: #fff;
  background: #5d93fd;
  border-radius: 25px;
  font-size: 16px;
  margin: 100px auto;
  border: 0;
}
.groupBox {
  .group {
    width: 320px;
    height: 378px;
    border: 2px solid #eee;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    .goroupBtn {
      display: flex;
      font-size: 16px;
      border-bottom: 1px solid #e9e9e9;
      p {
        width: 50%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #666666;
      }
      span {
        width: 50%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #5896e1;
      }
    }
    .groupList {
      height: calc(100% - 50px);
      > .scroll-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // box-shadow: 0 0 8px lighten(#5c94fc, 20%);
        height: 80px;
        position: relative;
        overflow: hidden;
        transform: translateY(10px);
        .cont {
          height: 50px;
          line-height: 50px;
          color: #000;
          background: #fff;
          padding-left: 20px;
          font-size: 14px;
          border-bottom: 1px solid #e9e9e9;
        }
        .contBlue {
          background: #5d93fd;
          color: #fff;
          height: 50px;
          line-height: 50px;
          padding-left: 20px;
          font-size: 14px;
          border-bottom: 1px solid #e9e9e9;
        }
        .end-tip {
          margin: 0;
          padding: 15px;
          text-align: center;
          color: $gray;
          font-size: 15px;
        }
      }
    }
  }
  .zz {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 0.3;
  }
}
</style>

